<template>
	<view class="box">
		<view class="tabsBox">
			<u-tabs :list="tabsList" @click="realTimeTabs" :scrollable="false" lineWidth="72rpx"></u-tabs>
		</view>
		<view style="padding-top: 40vh;" v-if="!repList[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<base-loading :flag="show"/>
		<view class="boxMain">
			<view v-for="(item,index) in repList" :key="item.id">
				<view class="boxItem mb20">
					<view class="flex mb20">
						<view class="name w170">活动名称：</view>
						<view class="value nowrap">{{item.activityName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">负责人：</view>
						<view class="value nowrap">{{item.chargePerson}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">开始时间：</view>
						<view class="value">{{item.startTime}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">结束时间：</view>
						<view class="value">{{item.endTime}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">培训内容：</view>
						<view class="value nowrap">{{item.trainContent}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">参与人数：</view>
						<view class="value">{{item.participateNumber | filterNull(0)}}</view>
					</view>
					<view class="flex mt60 mb40" @click="checkAttac('10060',item.id)">
						<image src="../../static/iconPdf.png" class="iconPdf"></image>
						<view class="cob">查看培训附件</view>
					</view>
					<view class="fs24 c9a flex flex-end">
						<text>上传时间：</text>
						<text>2021-11-09</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				//tab栏下标
				tabsindex: 0,
				//tab栏
				tabsList: [{
					name: '未完成',
				}, {
					name: '已完成',
				}],
				//详情对象
				particulars: {},
				//全部数据
				repList: [],
				params: {
					pageIndex: 1,
					pageSize: 10
				},
				itemCount: 0
			}
		},
		onReachBottom() {
			if (this.itemCount > this.repList.length) {
				this.params.pageIndex++
				this.requestList()
			}
		},
		onShow() {
			this.itemCount = 0
			this.params.pageIndex = 1
			this.repList = []
			this.requestList()
		},
		methods: {
			//获取列表
			async requestList() {
				this.show = true
				if (this.tabsindex == 0) {
					let {
						resultValue: res
					} = await this.request(this.$api.queryNoFinish, this.params, "GET")
					setTimeout(()=>{
						this.show = false
						this.itemCount = res.itemCount
						this.repList = this.repList.concat(res.items)
					},300)
				} else {
					let {
						resultValue: res
					} = await this.request(this.$api.queryFinish, this.params, "GET")
					console.log(res)
					setTimeout(()=>{
						this.show = false
						this.itemCount = res.itemCount
						this.repList = this.repList.concat(res.items)
					},300)
				}

			},
			//tab栏切换
			realTimeTabs(e) {
				if (e.index != this.tabsindex) {
					uni.pageScrollTo({ //滚动条回到顶部
						scrollTop: 0,
						duration: 300
					})
					this.itemCount = 0
					this.params.pageIndex = 1
					this.repList = []
					this.tabsindex = e.index
					this.requestList()
				}
			},
			//预览附件支持doc, xls, ppt, pdf, docx, xlsx, pptx
			checkAttac(classify, connectId) {
				console.log(classify + '\n' + connectId)
				uni.navigateTo({
					url: './../checkTheAttachment/checkTheAttachment?classify=' + classify + '&connectId=' +
						connectId
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}

	>>>.u-tabs__wrapper__nav__item {
		padding: 0 15rpx !important;
	}

	>>>.u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important
	}

	>>>.u-badge--not-dot {
		padding: 4rpx 8rpx;
	}

	.boxMain {
		padding: 120rpx 20rpx 20rpx 20rpx;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
	}

	.w170 {
		width: 170rpx;
	}


	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.cob {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3473F9;
	}

	.iconPdf {
		width: 32rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}
</style>
